<template>
  <div class="query">
    <QueryForm :form="form" v-model="data" @handleQuery="handleQuery" />
  </div>
  <div class="table">
    <BaseTable
      v-loading="tableLoading"
      :columns="columns"
      :data="dataList"
      :pager="pager"
      @handleCurrentChange="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { getFrontRequestLog } from "@/api/log";

/****************************************** data ******************************************/
// 参数
const pager = reactive({
  page: 1,
  limit: 10,
  total: 0,
});

// 生成查询form结构数据
const form = [
  {
    type: "input",
    model: "user_id",
    label: "用户id",
    placeholder: "请输入用户ID",
  },
];

// 表单loading
const tableLoading = ref(false);

// 初始化用户表单对象
const data = ref(<any>{});

// 定义动态表格的格式
const columns = reactive([
  {
    label: "用户id",
    prop: "user_id",
  },
  {
    label: "请求地址",
    prop: "url",
    width: 260,
  },
  {
    label: "请求方式",
    prop: "method",
  },
  {
    label: "请求参数",
    prop: "body",
  },
  {
    label: "ip",
    prop: "ip_address",
    formatter: (row: any, column: any, value: any) => {
      if (value && value.indexOf("::ffff:") != -1) {
        return value.split("::ffff:")[1];
      }
      return value;
    },
  },
  {
    label: "请求时间",
    prop: "created_time",
    width: 180,
  },
]);

const dataList = ref(<any>[]);

/****************************************** 生命周期函数 ******************************************/

onMounted(() => {
  handleQuery();
});

/****************************************** method ******************************************/

// 查询
const handleQuery = async () => {
  tableLoading.value = true;
  let data = (await getFrontRequestLog(pager)).data;
  dataList.value = data.rows;
  pager.total = data.count;
  tableLoading.value = false;
};

// 分页事件处理
const handleCurrentChange = (current: number) => {
  pager.page = current;
  handleQuery();
};
</script>

<style lang="scss" scoped></style>
